<template>
  <div id="wpb_time_board">
    <div style="padding: 15px; margin-top: 50px;">
      <el-select style="width: 180px" v-model="curProjectId" clearable placeholder="全部项目" size="small" filterable @change="projectChange">
        <el-option
          v-for="item in projects"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <div style="float:right; width:170px; height:40px;">
      <el-form label-width="70px">
        <el-form-item label="选择人员" prop="leader">
          <avatar-list ref="user" :eclipse="true" :clear="true" :clearable="true" :maxNumber="1" @avatarChange="avatarChange" :disabledDingIds="this.unPermDingIds.split(',')" ></avatar-list>
        </el-form-item>
      </el-form>
      </div>
    </div>
    <ex-infinite-scroll ref="ins" class="timelineBoard" :url="url" :size="10">
      <template slot="content" slot-scope="{list}">
        <el-timeline>
          <el-timeline-item v-for="log in list" :key="log[0].id" :timestamp="log[0].logTimeStr + ' ' +log[0].memberName +' '+ log[0].position" placement="top">
              <el-card v-for="logItem in log" style="cursor:pointer" :key="logItem.id" @click.native="showLogDetail(logItem)" :style="log.length>1?'margin-bottom:5px':'margin-bottom:0px'">
                <right-badge :word="getStatus(logItem)" :color="getColor(logItem)" >
                  <div v-if="!curProjectId">{{logItem.projectName}}</div>
                  <p class="logContent" v-html="logItem.logContent.replace(/\n/g,'<br/>')"></p>
                </right-badge>
              </el-card>
          </el-timeline-item>
        </el-timeline>
      </template>
    </ex-infinite-scroll>
    <el-dialog v-if="currentLog" :visible.sync="visibleLogDetail" :title="currentLog.logTimeStr + ' ' +currentLog.memberName" width="95%">
      <div>
        <div style="padding-bottom: 20px;clear:both;">
          <el-card>
            <right-badge :word="getStatus(currentLog)" :color="getColor(currentLog)" >
              <div v-if="!curProjectId">{{currentLog.projectName}}</div>
              <p v-html="currentLog.logContent.replace(/\n/g,'<br/>')"></p>
              <img-viewer :data="currentLog.attachmentList"></img-viewer>
            </right-badge>
          </el-card>
          <br>
          <comment :userInfo="userInfo" :members="members" :log="currentLog"></comment>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="visibleLogDetail = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import dingMixin from  '@/mixins/ding'
  import AvatarList from '@/components/ding/avatar-list'
  import ExInfiniteScroll from '@/components/common/ex-infinite-scroll'
  import RightBadge from '@/components/common/right-badge'
  import Comment from '@/components/ding/comment'
  import ImgViewer from '@/components/common/img-viewer'
  import {dateUtil} from '@/utils/dateUtil'

  export default {
    data () {
      return {
        projects: [],
        curProjectId: '',
        avatars:[],
        logs:[],
        currentLog: '',
        members:[],
        visibleLogDetail: false,
        url: '/wpb/projectlog/getDynLogs'
      }
    },
    components:{
      AvatarList,ExInfiniteScroll,RightBadge,Comment,ImgViewer
    },
    mixins: [dingMixin],
    activated () {
      if(this.$route.query.dingId){
        this.avatars = [{emplId:this.$route.query.dingId, name: this.$route.query.name}]
      }
      else{
        this.avatars =[{emplId:this.userInfo.dingId, name: this.userInfo.realName}]
      }
      this.$refs.user.bindData(this.avatars);
      this.getLogs()
    },
    created(){
      this.getProjects()
      this.loadMembers().then(data=>this.members = data);
    },
    methods: {
      async showLogDetail(logItem){
        logItem.comment = await this.getComments(logItem.id)
        this.visibleLogDetail=true
        this.currentLog = logItem
      },
      getStatus(logItem){
        if(logItem.status==1){
          return "进行中"
        }
        else if(logItem.status==2){
          return "已完成"
        }
        else if(logItem.status==3){
          return "已逾期"
        }
        else if(logItem.status==4){
          return "已完成"
        }
      },
      getColor(logItem){
        if(logItem.status==1){
          return '#21D779'
        }
        else if(logItem.status==2){
          return '#B0C7CD';
        }
        else if(logItem.status==3){
          return '#9987FA';
        }
        else if(logItem.status==4){
          return "#B0C7CD";
        }
      },
      async getComments (logId) {
        let list = await this.$httpN.postQ('/wpb/projectcomment/listCommentsByLogId', {logId: logId});
        return list
      },
      getProjects(){
        this.$http({
          url: this.$http.adornUrl('/wpb/projectbase/list'),
          method: 'post',
          data: this.$http.adornData({
            'page': 1,
            'limit': 100
          })
        }).then(({data}) => {
            if (data && data.code === 0) {
              this.projects = data.data.list.filter(x=>x.id>0)
              this.projects.unshift({'id': -4, 'name':'月报'})
              this.projects.unshift({'id': -2, 'name':'周报'})
            }
          }
        ).catch(error=>{
          console.info(error)
        })
      },
      processDataBeforeRender(logs){
        let logStash = new Map();
        logs.forEach(x=>{
          if(!logStash.get(x.logTime + x.memberId)) {
            logStash.set(x.logTime + x.memberId, [])
          }
          logStash.get(x.logTime + x.memberId).push(x)
        })
        return [...logStash.values()]
      },
      getBoardDingId(){
        if(this.$refs.user.getDingEmpIds().length>0)
          return this.$refs.user.getDingEmpIds().join(",")
        return null
      },
      getLogs(){
        let params = {
          'memberId': this.getBoardDingId(),
          'projectId': this.curProjectId,
          'asc': false
/*          'logType': 1*/
        }
        this.$refs.ins.getData(params, this.processDataBeforeRender)
      },
      avatarChange(dingIds){
        this.getLogs()
      },
      projectChange(){
        this.getLogs()
      }
    }
  }
</script>
<style lang="scss">
#wpb_time_board{
  .el-timeline-item__timestamp{
    color: #00a0ed;
    font-weight: bold;
    line-height: 18px;
  }
  .el-timeline-item__tail{
    border-left:2px solid #71b9de;
  }
  .el-timeline-item__node{
    background-color: #00a0ea;
  }
/*  .el-timeline-item {
    padding-bottom: 0px;
  }
  .el-card{
    margin-bottom: 0px;
  }*/
}
</style>
<style lang="scss" scoped>
  .timelineBoard{
    margin-left:-25px;padding-right: 12px; margin-bottom: 40px;height:calc(100vh - 170px);overflow: scroll;
  }

  .logContent{
    font-size:13px;
    //display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; line-height: 18px;
  }

</style>
